<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件值传递</title>
    <script src="../../js/common/vue/vue.js"></script>
</head>
<body>
<!--

1 在模板对象中使用props属性定义一些变量用于接收父组件传递过来的数据。
2 在模板中使用 v-bind  props变量名 = 父组的变量名，将父组件的数据与子组件的变量做绑定。
3 然后在模板中使用props里面的变量就等同于在使用对应的父组件的数据了。
-->
<div id="app">
    <cpn :props_messge="messge" :props_messge2="messge2"></cpn>
</div>

<template id="temp">
    <div>
        <h2>{{props_messge}}</h2>
        <h2>{{props_messge2}}</h2>
    </div>
</template>
<script>
    const  cpn ={
        template:'#temp',
        // props 可以是一个组数，也可以是一个对象，当为对象时，可以给做数据类型验证，赋默认值。
        // 默认值（默认值只在绑定的数据没有定义时才生效）。
        // 当默认值是一个对象或者组数时，默认值必须是一个函数用函数返回一个数组或对象。5.17版本以下存在此情况。
        // 数据类相关检验 可检验的类型为：String Number  Boolean Array Object Date Function
        // v-bind 大小写不敏感，所以需要用全小写，并且用-隔开。a-b
        //数组方式
        // props:['props_messge','props_messge2']
        //对象方式
        props:{
            props_messge:{
                type:String,//数据类型验证
                default:'aa'//默认值
            },
            props_messge2:{
                type:String,//数据类型验证。
                default:'aa',//默认值。
                required:true//表示必须传入的值。
            }
        }
        //
    };
    new Vue({
        el:'#app',
        data:{
            messge:'父组件变量',
            messge2:'父组件变量2'
        },
        components:{
            cpn
        }
    })
</script>
</body>
</html>